<template>
    <div id="change">
        <div class="change-top">
            单据日期：
            <el-date-picker size="small" v-model="assemble.createDate" value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 140px;" placeholder="选择日期">
            </el-date-picker>
            &nbsp;&nbsp;组装费用：
            <el-input size="small" v-model="assemble.assemCost" style="width: 120px" placeholder="0.00"></el-input>
            &nbsp;&nbsp;业务员：
            <el-select style="width: 110px;" size="small" v-model="assemble.employeeId">
                <el-option v-for="em, index in emList" :key="index" :label="em.employeeName"
                    :value="em.employeeId"></el-option>
            </el-select>
            &nbsp;&nbsp;
            <el-button size="small" @click="saveAssemble">保存</el-button>
            <el-button size="small" type="primary">导入</el-button>
            <el-button size="small" type="success">审核</el-button>
            <PublicLink />
        </div>
        <div class="change-content">
            <h5>组合件：</h5>
            <br>
            <br>
            <div class="com-div">
                <table id="combile" style="width: 100%;min-width: 1600px;">
                    <tr>
                        <th width="15%">商品编号</th>
                        <th width="10%">单位</th>
                        <th width="20%">商品名称</th>
                        <th width="20%">商品类别</th>
                        <th width="10%">品牌</th>
                        <th width="10%">仓库</th>
                        <th width="10%">数量</th>
                        <th width="10%">入库单位成本</th>
                        <th width="10%">入库成本</th>
                        <th>备注</th>
                    </tr>
                    <tr>
                        <td>
                            <el-input size="small" style="width: 140px;"
                                v-model="assemble.combilePonent.goodcode"></el-input>
                            <el-button @click="comShow = true" size="small"><i class="el-icon-more"></i></el-button>
                        </td>
                        <td>
                            {{ assemble.combilePonent.unitname }}
                        </td>
                        <td>
                            {{ assemble.combilePonent.goodname }}
                        </td>
                        <td>
                            {{ assemble.combilePonent.categoryName }}
                        </td>
                        <td>
                            {{ assemble.combilePonent.brandName }}
                        </td>
                        <td>
                            <el-select size="small" style="width: 100px;" v-model="assemble.combilePonent.wid">
                                <el-option v-for="wid in storeList" :key="wid.shId" :label="wid.storeHomeName"
                                    :value="wid.shId">
                                </el-option>
                            </el-select>
                        </td>
                        <td><el-input size="small" style="width: 100px;"
                                v-model="assemble.combilePonent.num"></el-input></td>
                        <td><el-input size="small" style="width: 100px;"
                                v-model="assemble.combilePonent.comPrice"></el-input></td>
                        <td></td>
                        <td><el-input size="small" v-model="assemble.combilePonent.detailRemark"
                                style="width: 220px;"></el-input>
                        </td>
                    </tr>
                </table>
            </div>
            <!-- <table id="combile" style="width: 100%;">
                <tr>
                    <th width="20%">商品编号</th>
                    <th width="15%">单位</th>
                    <th>仓库</th>
                    <th>数量</th>
                    <th width="10%">入库单位成本</th>
                    <th width="10%">入库成本</th>
                    <th width="30%">备注</th>
                </tr>
                <tr>
                    <td>
                        <el-input size="small" style="width: 170px;"
                            v-model="assemble.combilePonent.goodcode"></el-input>
                        <el-button @click="goodsShow = true" size="small"><i class="el-icon-more"></i></el-button>
                    </td>
                    <td></td>
                    <td>
                        <el-select size="small" style="width: 100px;" v-model="assemble.combilePonent.wid">
                            <el-option v-for="wid in storeList" :key="wid.shId" :label="wid.storeHomeName"
                                :value="wid.shId">
                            </el-option>
                        </el-select>
                    </td>
                    <td><el-input size="small" style="width: 100px;" v-model="assemble.combilePonent.num"></el-input>
                    </td>
                    <td><el-input size="small" style="width: 100px;"
                            v-model="assemble.combilePonent.comPrice"></el-input></td>
                    <td></td>
                    <td><el-input size="small" v-model="assemble.combilePonent.detailRemark"></el-input></td>
                </tr>
            </table> -->
            <br>
            <h5>子件：</h5>
            <br>
            <el-table show-summary :summary-method="getSummaries" height="300px" :data="assemble.combilePonent.subList"
                border style="width: 100%;font-size: 13px;">
                <el-table-column width="120px">
                    <el-button size="mini" @click="addRow"><i class="el-icon-circle-plus-outline"></i></el-button>
                    <el-button size="mini" @click="reduceRow"><i class="el-icon-remove-outline"></i></el-button>
                </el-table-column>
                <el-table-column label="商品编号" width="220">
                    <template slot-scope="scope">
                        <el-input style="width: 140px;" size="small" v-model="scope.row.goodcode"></el-input>
                        <el-button @click="goodsShow = true" size="small"><i class="el-icon-more"></i></el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="goodname" label="商品名称" width="120">
                </el-table-column>
                <el-table-column prop="categoryName" label="商品类别" width="120">
                </el-table-column>
                <el-table-column prop="brandName" label="品牌" width="120"></el-table-column>
                <el-table-column prop="unitname" label="单位" width="120">
                </el-table-column>
                <el-table-column label="仓库" width="120">
                    <template slot-scope="scope">
                        <el-select size="small" v-model="scope.row.wid">
                            <el-option v-for="wid in storeList" :key="wid.shId" :label="wid.storeHomeName"
                                :value="wid.shId">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="数量" width="120">
                    <template slot-scope="scope">
                        <el-input size="small" v-model="scope.row.num"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="出库单位成本" width="150">
                    <template slot-scope="scope">
                        <el-input size="small" style="width: 100px;" v-model="scope.row.subPrice"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="aid" label="出库成本" width="120">
                </el-table-column>
                <el-table-column prop="remark" label="备注" width="360">
                    <template slot-scope="scope">
                        <el-input size="small" v-model="scope.row.detailRemark"></el-input>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog top="20px" title="选择商品" :visible.sync="goodsShow">
                <GoodsChoose ref="chooseGoods" :goodsShow="goodsShow" />
                <div slot="footer" class="dialog-footer">
                    <el-button @click="goodsShow = false">取 消</el-button>
                    <el-button type="primary" @click="yesGoods">确 定</el-button>
                </div>
            </el-dialog>
            <el-dialog top="20px" title="选择商品" :visible.sync="comShow">
                <GoodsChoose ref="chooseGoods" :goodsShow="comShow" />
                <div slot="footer" class="dialog-footer">
                    <el-button @click="comShow = false">取 消</el-button>
                    <el-button type="primary" @click="combileGoods">确 定</el-button>
                </div>
            </el-dialog>
            <el-button style="position: relative;right: -1200px;" @click="goto('ComboBill')">历史单据</el-button>
        </div>
    </div>
</template>

<script>
import GoodsChoose from '../public_com/GoodsChoose.vue';
import PublicLink from '../public_com/PublicLink.vue';

export default {
    name: 'UpdateComboBill',
    components: {
        PublicLink,
        GoodsChoose
    },
    data() {
        return {
            goodsShow: false,
            comShow: false,
            value: '',
            input: '',
            value1: '',
            assemble: null,
            storeList: [],
            emList: []
        }
    },
    methods: {
        goto(to) {
            this.$router.push(to)
        },
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '总价';
                    return;
                }
                const values = data.map(item => Number(item[column.property]));
                if (column.property === "num") {
                    sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr);
                        if (!isNaN(value)) {
                            return prev + curr;
                        } else {
                            return prev;
                        }
                    }, 0);
                }
            });

            return sums;
        },
        successMessage(msg) {
            this.$message({
                message: msg,
                type: 'success'
            });
        },
        errorMessage(msg) {
            this.$message({
                message: msg
                ,
                type: 'error'
            })
        },
        addRow() {
            this.assemble.combilePonent.subList.push({
                goodcode: '',
                subPrice: '',
                wid: '',
                cId: '',
                unitname: '',
                num: '',
                detailRemark: ''
            })
        },
        reduceRow() {
            if (this.assemble.combilePonent.subList.length > 1) {
                this.assemble.combilePonent.subList.pop()
            }
        },
        combileGoods() {
            this.comShow = false
            var detail = this.$refs.chooseGoods.selectionList[0]
            this.assemble.combilePonent.goodcode = detail.goodcode
            this.assemble.combilePonent.goodname = detail.goodname
            this.assemble.combilePonent.brandName = detail.brandName
            this.assemble.combilePonent.categoryName = detail.categoryName
        },
        yesGoods() {
            this.goodsShow = false
            // this.goodsList = 
            // console.log(this.goodsList)
            //遍历商品列表
            var detailList = this.$refs.chooseGoods.selectionList
            var indexs = []
            //删除表格中空白的行
            this.assemble.combilePonent.subList.forEach((detail, index) => {
                if (detail.goodcode == '') {
                    indexs.push(index)
                    console.log(index)
                }
            })
            indexs.reverse().forEach((index, i) => {
                console.log(index)
                this.assemble.combilePonent.subList.splice(index, 1)
            })
            detailList.forEach((item, index) => {
                this.assemble.combilePonent.subList.push(
                    {
                        goodcode: item.goodcode,
                        unitname: item.unitname,
                        brandName: item.brandName,
                        categoryName: item.categoryName,
                        goodname: item.goodname,
                        subPrice: '',
                        wid: '',
                        cId: '',
                        num: '',
                        detailRemark: ''
                    }
                )
            })
        },
        getEmployees() {
            this.axios.get('/info/employee/listAll').then(rs => {
                this.emList = rs.data.list
            })
        },
        getStoreList() {
            this.axios.get('/info/storeHouse/getAllStore',
                {
                    params: {
                        cId: 1
                    }
                }
            ).then(rs => {
                this.storeList = rs.data.storeList
            })
        },
        saveAssemble() {
            const priceRegix = /^[1-9]\d+(\.\d{2})?$/
            const numRegix = /^[1-9]\d*$/
            if (this.assemble.createDate == '') {
                this.errorMessage("请选择单据日期")
                return
            }
            if (this.assemble.assemCost == '') {
                this.errorMessage("请填写组装费用")
                return
            }
            if (!priceRegix.test(this.assemble.assemCost)) {
                this.errorMessage("组装费用不合理")
                return
            }
            if (this.assemble.employeeId == '') {
                this.errorMessage("请选择业务员")
                return
            }
            if (this.assemble.combilePonent.goodcode == '') {
                this.errorMessage("请选择组合件商品编号")
                return
            }
            if (this.assemble.combilePonent.wid == '') {
                this.errorMessage("请选择组合件的仓库")
                return
            }
            if (this.assemble.combilePonent.num == '') {
                this.errorMessage("请填写组合件的数量")
                return
            }
            if (!numRegix.test(this.assemble.combilePonent.num)) {
                this.errorMessage("组合件的数量不合理")
                return
            }
            for (var i = 0; i < this.assemble.combilePonent.subList.length; i++) {
                if (this.assemble.combilePonent.subList[i].goodcode == '') {
                    this.errorMessage("请填写第" + (i + 1) + "行子件商品编号");
                    return;
                }
                if (this.assemble.combilePonent.subList[i].wid == '') {
                    this.errorMessage("请选择第" + (i + 1) + "行子件的仓库");
                    return;
                }
                if (!numRegix.test(this.assemble.combilePonent.subList[i].num)) {
                    this.errorMessage("第" + (i + 1) + "行商品数量不合理");
                    return;
                }
            }
            this.axios.post('/store/assemble/updateAssemble',
                this.assemble
            ).then(rs => {
                if (rs.data.code == 200) {
                    this.successMessage("修改成功")
                } else {
                    this.errorMessage("修改出错了")
                }
            })
        },
        getAssemble(assemId) {

            this.axios.get('/store/assemble/getAssemble', {
                params: {
                    assemId
                }
            }).then(rs => {
                this.assemble = rs.data.assemble
                // console.log(rs.data)
            })
        }
    },
    created() {
        const assemId = this.$route.query.assemId
        this.getStoreList();
        this.getEmployees()
        this.getAssemble(assemId)
    }

}
</script>

<style scoped>
#change {
    width: 100%;
    height: 100%;
}

.change-top {
    width: calc(100% -20px);
    height: 60px;
    /* background-color: pink; */
    line-height: 60px;
    padding-left: 20px;
    font-size: 13px;
}

.change-content {
    width: 100%;
    height: calc(100% - 60px);
    /* background-color: skyblue; */
}

.el-input,
.el-button {
    font-size: 13px;
}

/* 合计行整体样式修改开始 */
.el-table /deep/ .el-table__footer-wrapper tbody td {
    background-color: #fff1d4;
}

.el-table /deep/ .el-table__body tr:hover>td {
    background-color: #fff1d4;
}

#combile {
    width: 80%;
    border-collapse: collapse;
}

#combile th,
#combile td {
    border: 1px solid #ebeef5;
    color: #9093a6;
    padding: 10px;
}

#combile th {
    font-size: 14px;
    font-weight: 550;
}

.com-div {
    width: 100%;
    overflow-x: auto;
}

.com-div table th,
.com-div table td {
    white-space: nowrap;
    /* width: fit-content; */
}
</style>